<template>
	<!-- 页面的根视图 -->
	<view>
		<!-- 使用 web-view 组件来显示网页内容，绑定 src 属性为 url，同时添加 web 类名用于样式设置 -->
		<web-view :src="url" class="web"></web-view>
	</view>
</template>
<script setup>
	// 从 Vue 中导入 ref 函数，用于创建响应式引用
	import {
		ref
	} from 'vue';
	// 从 uni-app 导入 onLoad 生命周期函数，用于页面加载时执行操作
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// 导入配置文件，包含一些配置信息，如高德地图的 key 和 skey 等
	import {
		CONFIG
	} from '../../utils/config';
	// 导入用户存储模块，可能存储了用户相关的信息，如当前位置等
	import {
		userStore
	} from "../../store/userStore";

	// 获取用户存储的实例
	let store = userStore();

	// 创建一个响应式引用 url，用于存储要显示的网页地址
	let url = ref("");

	// 在页面加载时执行的函数，接收页面传入的数据 data
	onLoad((data) => {
		// 获取传入的数据中的 type 属性
		let type = data.type;
		console.log(type);
		// 以下是根据不同的 type 来设置不同的 url 和导航栏标题

		// 当 type 为 1 时，表示查看自己的位置
		if (type == 1) {
			// 构造一个高德地图的导航页面 URL，显示当前位置
			url.value =
				`https://m.amap.com/navi/?dest=${store.currentPos.longitude},${store.currentPos.latitude}&destName=我的位置&hideRouteIcon=1&key=${CONFIG.gaode_key}&jscode=${CONFIG.gaode_skey}`;
			// 设置导航栏标题为 "我的位置"
			uni.setNavigationBarTitle({
				title: "我的位置"
			});
		}
		// 当 type 为 2 时，表示查看从当前位置到某个目的地的路径
		else if (type == 2) {
			// 获取传入的数据中的目的地的经纬度
			let lat = data.lat;
			let lon = data.lon;
			console.log(store.currentPos);
			// 构造一个高德地图的导航页面 URL，从当前位置到指定位置的导航
			url.value =
				`https://m.amap.com/navi/?start=${store.currentPos.longitude},${store.currentPos.latitude}&dest=${lon},${lat}&destName=${data.name}&key=${CONFIG.gaode_key}&jscode=${CONFIG.gaode_skey}`;
			console.log(url.value);
			// 设置导航栏标题为 "到" + 目的地名称 + "的路径"
			uni.setNavigationBarTitle({
				title: "到" + data.name + "的路径"
			});
		}
	});
</script>
<style>
	/* 为 web-view 组件设置样式，使其宽度占满整个屏幕，高度为视口高度 100vh */
	.web {
		width: 100%;
		height: 100vh;
	}
</style>